<template>
	<view>
		<view class="wrap">
			<van-field name="radio" label="我的性别">
				<template #input>
					<van-radio-group v-model="checked1" direction="horizontal">
						<van-radio name="1" checked-color="#fbc117">男生</van-radio>
						<van-radio name="0" checked-color="#fbc117">女生</van-radio>
					</van-radio-group>
				</template>
			</van-field>
			<van-field name="radio" label="养宠经验">
				<template #input>
					<van-radio-group v-model="checked2" direction="horizontal">
						<van-radio name="有经验" checked-color="#fbc117">有经验</van-radio>
						<van-radio name="无经验" checked-color="#fbc117">无经验</van-radio>
					</van-radio-group>
				</template>
			</van-field>
			<van-field name="radio" label="婚姻状况">
				<template #input>
					<van-radio-group v-model="checked3" direction="horizontal">
						<van-radio name="单身" checked-color="#fbc117">单身</van-radio>
						<van-radio name="恋爱中" checked-color="#fbc117">恋爱中</van-radio>
						<van-radio name="已婚" checked-color="#fbc117">已婚</van-radio>
					</van-radio-group>
				</template>
			</van-field>
			<van-field name="radio" label="住房情况">
				<template #input>
					<van-radio-group v-model="checked4" direction="horizontal">
						<van-radio name="自住房" checked-color="#fbc117">自住房</van-radio>
						<van-radio name="整租房" checked-color="#fbc117">整租房</van-radio>
						<van-radio name="合租" checked-color="#fbc117">合租</van-radio>
					</van-radio-group>
				</template>
			</van-field>
			<van-field name="radio" label="工作状态">
				<template #input>
					<van-radio-group v-model="checked5" direction="horizontal">
						<van-radio name="无业" checked-color="#fbc117">无业</van-radio>
						<van-radio name="学生" checked-color="#fbc117">学生</van-radio>
						<van-radio name="工作" checked-color="#fbc117">工作</van-radio>
					</van-radio-group>
				</template>
			</van-field>
			<van-field v-model="age" is-link readonly name="picker" label="我的年龄" placeholder="点击选择年龄"
				@click="showPicker1 = true" />
			<van-popup v-model:show="showPicker1" position="bottom">
				<van-picker :columns="ages" @confirm="onConfirm1" @cancel="showPicker1 = false" />
			</van-popup>
			<van-field v-model="have" is-link readonly name="picker" label="已有宠物" placeholder="点击选择已有宠物"
				@click="showPicker2 = true" />
			<van-popup v-model:show="showPicker2" position="bottom">
				<van-picker :columns="haves" @confirm="onConfirm2" @cancel="showPicker2 = false" />
			</van-popup>
			<van-field v-model="income" is-link readonly name="picker" label="月收入" placeholder="点击选择月收入"
				@click="showPicker3 = true" />
			<van-popup v-model:show="showPicker3" position="bottom">
				<van-picker :columns="incomes" @confirm="onConfirm3" @cancel="showPicker3 = false" />
			</van-popup>
			<van-field v-model="address" is-link readonly name="area" label="地区选择" placeholder="点击选择省市区"
				@click="showArea = true" />
			<van-popup v-model:show="showArea" position="bottom">
				<van-area :area-list="areaList" @confirm="onConfirm" @cancel="showArea = false" />
			</van-popup>
			<van-field v-model="tel" type="tel" label="手机号" placeholder="请输入手机号" />
			<van-cell-group inset>
				<text style="font-size: 28rpx;line-height: 80rpx;">让送养人看到我的诚意</text>
				<van-field v-model="message" rows="2" autosize type="textarea" maxlength="50" placeholder="请输入留言"
					show-word-limit style="background-color:#f8f8f8;" />
			</van-cell-group>
			<van-button square
				style="width: 100vw;height: 50px;font-size: 42rpx;background-color: #f1ad48;color: #ffffff;" class="btn"
				@click="commit">提交资料</van-button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import $http from '../../request/index.js'
	import {
		showSuccessToast,
		showFailToast
	} from 'vant'
	let tel = ref('')
	let message = ref('')
	let petid = ref('')

	let checked1 = ref('1')
	let checked2 = ref('有经验')
	let checked3 = ref('单身')
	let checked4 = ref('自住房')
	let checked5 = ref('无业')

	// 选择器
	let age = ref('');
	let ageval = ref('')
	let showPicker1 = ref(false);
	let showPicker2 = ref(false);
	let showPicker3 = ref(false);
	let ages = [{
			text: '60后',
			value: '1'
		},
		{
			text: '70后',
			value: '2'
		},
		{
			text: '80后',
			value: '3'
		},
		{
			text: '90后',
			value: '4'
		},
		{
			text: '00后',
			value: '5'
		},
	];
	let have = ref('')
	let haveval = ref('')
	let haves = ref([{
			text: '猫咪',
			value: '1'
		},
		{
			text: '狗狗',
			value: '2'
		},
		{
			text: '猫狗双全',
			value: '3'
		},
		{
			text: '暂无',
			value: '4'
		}
	]);
	let income = ref('')
	let incomeval = ref('')
	let incomes = ref([{
			text: '小于3千',
			value: '1'
		},
		{
			text: '3千~6千',
			value: '2'
		},
		{
			text: '6千~1万',
			value: '3'
		},
		{
			text: '大于1万',
			value: '4'
		}
	])


	let onConfirm1 = ({ //年龄
		selectedOptions
	}) => {

		age.value = selectedOptions[0]?.text;
		ageval.value = selectedOptions[0]?.value;
		showPicker1.value = false;
	};
	let onConfirm2 = ({ //已有宠物
		selectedOptions
	}) => {
		have.value = selectedOptions[0]?.text;
		haveval.value = selectedOptions[0]?.value;
		showPicker2.value = false;
	};
	let onConfirm3 = ({ //月收入
		selectedOptions
	}) => {
		income.value = selectedOptions[0]?.text;
		incomeval.value = selectedOptions[0]?.value;
		showPicker3.value = false;
	};
	// 省市区
	import {
		areaList
	} from '@vant/area-data';
	const address = ref('');
	const showArea = ref(false);
	const onConfirm = ({
		selectedOptions
	}) => {
		showArea.value = false;
		address.value = selectedOptions.map((item) => item.text).join('/')
	};
	// 提交资料
	function commit() { //领养人信息
		let data = { //领养人信息采集
			neckSex: checked1.value * 1, //性别（男1、女0）
			adoptExperience: checked2.value, //养宠经验（有、无）
			adoptMarital: checked3.value, //婚姻状况（单身、恋爱中、已婚）
			adoptHouse: checked4.value, //住房情况（自住房、整租、合租）
			adoptJob: checked5.value, //工作状态（无业、学生、工作）
			adoptAge: age.value, //我的年龄（60后、70、80、90、00）
			adoptHavepet: have.value, //已有宠物（猫咪、狗狗、猫狗双全、暂无）
			adoptIncome: income.value, //月收入（小于3000、3千-6千、6千-1万、大于1万）
			neckAddress: address.value.replace(/\//g, ''), //领养人地址,字符串(山西省阳泉市平定县)
			neckPhone: tel.value, //手机号
			neckMessage: message.value, //留言
			neckPet: petid.value * 1
		}
		console.log(data)
		$http.post('/examineneck/adoptinfo', data).then(res => {
			console.log(res)
			let {
				code,
				message
			} = res
			if (!code) {
				showSuccessToast(message)
			} else {
				showFailToast(message)
			}
			setTimeout(() => {
				uni.navigateBack()
			}, 1500)
		})
	}

	import {
		onLoad
	} from '@dcloudio/uni-app';
	onLoad((id) => { //接收上个页面传过来的id
		console.log('接收传值：', id.petId)
		petid.value = id.petId
	});
</script>

<style scoped>
	.wrap {
		width: 100vw;
		height: calc(100vh - 44px);
		overflow-y: scroll;
	}

	.btn {
		position: fixed;
		bottom: 0;
		left: 0;
	}
</style>